<template>
  <el-dialog
    :modelValue="modelValue"
    :title="title"
    :width="width"
    @close="close"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <slot />
  </el-dialog>
</template>

<script setup>
defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  title: String,
  width: {
    type: String,
    default: '640',
  },
})
const emit = defineEmits(['update:modelValue', 'close'])
const close = () => {
  emit('update:modelValue', false)
  emit('close')
}
</script>

<style lang="scss" scoped>
// :deep(.el-dialog) {
//   display: inline-block;
//   width: var(--el-dialog-width, auto);
//   left: 50%;
//   transform: translateX(-50%);
//   .el-dialog__headerbtn {
//     display: flex;
//     align-items: center;
//     .el-dialog__close {
//       margin-left: auto;
//       width: 0.24rem;
//       height: 0.24rem;
//       svg {
//         width: 100%;
//         height: 100%;
//       }
//     }
//   }
// }
</style>
